<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function load(){
				let c = document.getElementById('myC');
				let ctx = c.getContext('2d');

				let img = new Image();
				img.onload = function(){
					//正常绘制图像
//					ctx.drawImage(img, 100, 100);
					//压缩\拉伸绘制图像
//					ctx.drawImage(img, 100, 100, 300, 212);
					//只绘制一部分
					// 前四个参数告诉你图像上怎么截取一部分
					// 后四个参数告诉你怎么在canvas上画
					ctx.drawImage(img, 142, 100, 284, 200, 100, 100, 300, 212);
				}
				img.src="img/bg.jpg";
			}

			window.onload = function(){
				load();
			}

		</script>
	</head>
	<body>
		<canvas id="myC" style="border: 1px #000 solid;" width="800" height="450">
			你的浏览器不支持canvas元素！
		</canvas>
	<div><script language="javascript">

	</script></div></body>
</html>
